<template>
  <el-dialog v-dialog-drag width="70%" :title="dialogLabel" :visible.sync="visible">
    <el-form :rules="rules" ref="form" :model="dataForm" label-width="120px">
      <el-form-item label="活动名称" prop="activity_name">
        <el-input style="width: 400px" placeholder="请输入活动名称" v-model="dataForm.activity_name"></el-input>
      </el-form-item>

      <div class="text-red-700 text-left pl-24 font-bold">输入99999默认为无限制兑换次数</div>

      <div class="flex items-center justify-between" v-for="(item, index) in dataForm.activity_gift_prize"
           :key="item.id + index">
        <el-form-item label="礼物奖励" prop="activity_gift_prize">
          <el-select placeholder="请选择" style="width: 320px" filterable v-model="item.id">
            <el-option :label="gift.name" :value="gift.id" v-for="gift in giftList" :key="gift.id">
              <span class="text-left">{{ gift.name }}</span>
              <img class="inline float-right w-8 h-8" :src="gift.picture" alt="">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="消耗糖果" label-width="80px">
          <el-input-number :min="0" v-model="item.consume_sugar_num"></el-input-number>
        </el-form-item>

        <el-form-item label="消耗点数"  label-width="80px">
          <el-input-number :min="0" v-model="item.consume_point_num"></el-input-number>
        </el-form-item>

        <el-form-item label="限购次数"  label-width="80px">
          <el-input-number :min="0" v-model="item.purchase_limitation_number"></el-input-number>
        </el-form-item>

        <el-form-item  label-width="0">
          <el-button type="danger" size="small" @click="handleDelStrip(index)"><i class="el-icon-delete"></i></el-button>
        </el-form-item>
      </div>

      <el-form-item>
        <el-button icon="el-icon-plus" size="mini" type="success" @click="handleAddStrip">增加一条</el-button>
      </el-form-item>

      <el-form-item label="点数名称" prop="point_name">
        <el-input style="width: 400px" placeholder="请输入点数名称" v-model="dataForm.point_name"></el-input>
      </el-form-item>

      <el-form-item label="新秀场点数" prop="first_sugar_num">
        <el-input-number :min="0" v-model="dataForm.first_sugar_num"></el-input-number>
      </el-form-item>

      <el-form-item label="大侠场点数" prop="second_sugar_num">
        <el-input-number :min="0" v-model="dataForm.second_sugar_num"></el-input-number>
      </el-form-item>

      <el-form-item label="盟主场点数" prop="third_sugar_num">
        <el-input-number :min="0" v-model="dataForm.third_sugar_num"></el-input-number>
      </el-form-item>

      <el-form-item label="起止时间" prop="start_time">
        <el-date-picker
          v-model="timeList"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handlePickerChange">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="活动状态" prop="is_open">
        <el-radio v-model="dataForm.is_open" border :label="1">是，开启</el-radio>
        <el-radio v-model="dataForm.is_open" border :label="0">否，不开启</el-radio>
      </el-form-item>
    </el-form>

    <div class="flex items-center justify-end">
      <el-button @click="handleToSubmit" type="success">确认</el-button>
      <el-button @click="close" type="info">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addSugarActivity, alterSugarActivity} from "@/api/eventManagement/userRede";

const dialogLabels = {
  new: "新增活动",
  edit: "编辑活动"
}

const rules = {
  activity_name: [
    {required: true, message: '请输入活动名称', trigger: 'blur'},
    {min: 3, max: 20, message: '活动名称长度应为3-20个字符', trigger: 'blur'},
  ],
  point_name: [
    {required: true, message: '请输入点数名称', trigger: 'blur'}
  ],
  is_open: [
    {required: true, message: '请选择是否开启活动', trigger: 'blur'}
  ],
  activity_gift_prize: [
    {type: 'array', required: true, message: '请添加至少一项', trigger: 'change'}
  ],
  first_sugar_num: [
    {required: true, trigger: 'blur'}
  ],
  second_sugar_num: [
    {required: true, trigger: 'blur'}
  ],
  third_sugar_num: [
    {required: true, trigger: 'blur'}
  ],
  start_time: [
    {required: true, trigger: 'blur'}
  ],
  end_time: [
    {required: true, trigger: 'blur'}
  ]
}

export default {
  name: "AddOrEdit",
  props: {
    giftList: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      id: 0,
      visible: false,
      dialogLabel: dialogLabels.new,
      timeList: [],

      rules,

      // 表单验证
      dataForm: {
        is_open: 0,
        activity_name: "",
        activity_gift_prize: [
          {
            id: "",
            consume_sugar_num: 0,
            consume_point_num: 0,
            purchase_limitation_number: 0
          }
        ],
        point_name: "",
        first_sugar_num: 0,
        second_sugar_num: 0,
        third_sugar_num: 0,
        start_time: "",
        end_time: ""
      }
    }
  },
  watch: {
    visible(value) {
      if (!value) this.clearForm()
    }
  },
  methods: {
    show(row) {
      if (row) {
        const {
          id,
          is_open,
          activity_name,
          activity_gift_prize,
          point_name,
          first_sugar_num,
          second_sugar_num,
          third_sugar_num,
          end_time,
          start_time
        } = row
        this.id = id
        this.dataForm.activity_gift_prize = JSON.parse(activity_gift_prize)

        this.dataForm.is_open = is_open
        this.dataForm.activity_name = activity_name
        this.dataForm.point_name = point_name
        this.dataForm.first_sugar_num = first_sugar_num
        this.dataForm.second_sugar_num = second_sugar_num
        this.dataForm.third_sugar_num = third_sugar_num
        this.dataForm.start_time = start_time
        this.dataForm.end_time = end_time

        this.timeList = [new Date(start_time * 1e3), new Date(end_time * 1e3)]

        this.dialogLabel = dialogLabels.edit
      } else {
        this.dialogLabel = dialogLabels.new
      }
      this.visible = true
    },

    close() {
      this.visible = false
      this.clearForm()
    },

    clearForm() {
      // this.$refs['form'].resetFields()
      this.dataForm = {
        is_open: 0,
        activity_name: "",
        activity_gift_prize: [
          {
            id: "",
            consume_sugar_num: 0,
            consume_point_num: 0,
            purchase_limitation_number: 0
          }
        ],
        point_name: "",
        first_sugar_num: 0,
        second_sugar_num: 0,
        third_sugar_num: 0,
        start_time: "",
        end_time: ""
      }
      this.id = 0
      this.timeList = []
    },

    //  提交表单
    handleToSubmit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) return

        const params = JSON.parse(JSON.stringify(this.dataForm))
        params.activity_gift_prize = JSON.stringify(params.activity_gift_prize)

        const successHandle = res => {
          const {code} = res
          if (code === 200) this.$message.success(this.dialogLabel + "成功！")
          this.$emit("initData")
          this.close()
        }

        if (this.id) {
          params.id = this.id
          alterSugarActivity(params).then(successHandle)
        } else {
          addSugarActivity(params).then(successHandle)
        }
      });
    },

    handlePickerChange(date) {
      try {
        const [start_time, end_time] = date || []
        if (start_time) this.dataForm.start_time = parseInt(new Date(start_time).valueOf() / 1e3)
        if (end_time) this.dataForm.end_time = parseInt(new Date(end_time).valueOf() / 1e3)
      } catch (e) {
        this.dataForm.start_time = ""
        this.dataForm.end_time = ""
      }
    },

    // 新增一条
    handleAddStrip() {
      this.dataForm.activity_gift_prize.push({
        id: "",
        consume_sugar_num: 0,
        consume_point_num: 0,
        purchase_limitation_number: 0
      })
    },

    // 删除配置
    handleDelStrip(index) {
      this.dataForm.activity_gift_prize.splice(index, 1)
    }
  }
}
</script>
